<!DOCTYPE html>
<html>
    <head>
        <title>分页栏组件</title>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width">
        <link type="text/css" rel="stylesheet" href="../style/avalon.doc.css">
        <script src="../avalon.js">

        </script>
        <script src="../highlight/shCore.js">

        </script>
        <script>
            require(["pager/avalon.pager"], function() {
                avalon.define("test", function(vm) {
                    vm.pager = {
                        nextText: "next",
                        prevText: "prev",
                        showPages: 5
                    }
                    vm.$skipArray = ["pager"]
                })
                avalon.bind(document, "keyup", function(e) {
                    if (e.which === 37 || e.which === 39) {
                        var widget = avalon.vmodels.keyBrowse
                        if (widget) {
                            widget.jumpPage(e, e.which === 39 ? "next" : "prev")
                        }
                    }
                })
                avalon.bind(document, window.netscape ? "DOMMouseScroll" : "mousewheel", function(e) {
                    var dir = (e.wheelDelta || -e.detail) > 0 ? "prev" : "next"
                    var widget = avalon.vmodels.scrollBrowse
                    if (widget) {
                        widget.jumpPage(e, dir)
                    }
                })
                avalon.scan()
            })
        </script>
    </head>
    <body ms-controller="test">
        <h1>通过左右方向键或滚轮改变页码</h1>
        <div ms-widget="pager,keyBrowse"></div>
        <div ms-widget="pager,scrollBrowse"></div>
        <pre class="brush:html;gutter:false;toolbar:false">
&lt;!DOCTYPE html&gt;
&lt;html&gt;
    &lt;head&gt;
        &lt;title&gt;分页栏组件&lt;/title&gt;
        &lt;meta charset="UTF-8"&gt;
        &lt;meta name="viewport" content="width=device-width"&gt;
        &lt;script src="../avalon.js"&gt;

        &lt;/script&gt;
        &lt;script&gt;
            require(["pager/avalon.pager"], function() {
                avalon.define("test", function(vm) {
                    vm.pager = {
                        nextText: "next",
                        prevText: "prev"
                    }
                    vm.$skipArray = ["pager"]
                })
                avalon.bind(document, "keyup", function(e) {
                    if (e.which === 37 || e.which === 39) {
                        var widget = avalon.vmodels.keyBrowse
                        if (widget) {
                            widget.jumpPage(e, e.which === 39 ? "next" : "prev")
                        }
                    }
                })
                avalon.bind(document, window.netscape ? "DOMMouseScroll" : "mousewheel", function(e) {
                    var dir = (e.wheelDelta || -e.detail) &gt; 0 ? "prev" : "next"
                    var widget = avalon.vmodels.scrollBrowse
                    if (widget) {
                        widget.jumpPage(e, dir)
                    }
                })
                avalon.scan()
            })
        &lt;/script&gt;
    &lt;/head&gt;
    &lt;body ms-controller="test"&gt;
        &lt;h1&gt;通过左右方向键或滚轮改变页码&lt;/h1&gt;
        &lt;div ms-widget="pager,keyBrowse"&gt;&lt;/div&gt;
        &lt;div ms-widget="pager,scrollBrowse"&gt;&lt;/div&gt;
    &lt;/body&gt;
&lt;/html&gt;           
        </pre>
    </body>
</html>
